---
interface Props {
    linkUrl: string;
    linkName: string;
    orderNum: string;
    linkIco: string;
    keywords: string;
    description: string;
    linkId: string;
}
const { linkUrl, linkName, linkId, orderNum, linkIco, keywords, description } =
    Astro.props;
---

<!-- 网站卡片网格 -->
<div
    th:attr="data-tooltip-target=${linkTwo.linkId + '-yo'}"
    data-tooltip-placement="bottom"
    class="bg-white group dark:bg-gray-800 rounded-lg shadow-sm p-2 flex flex-col space-y-2 hover:shadow-md transition-shadow duration-200 border border-gray-100 dark:border-gray-700"
>
    <div class="flex items-center space-x-2">
        <img
            th:src={linkIco}
            th:alt={linkName}
            class="w-8 h-8 rounded-full group-hover:scale-125"
        />
        <div class="flex flex-col">
            <a th:href={linkUrl}>
                <h3
                    th:text={linkName}
                    class="text-base font-medium text-gray-900 dark:text-white line-clamp-1 group-hover:text-red-500"
                >
                </h3>
                <p
                    class="text-sm text-gray-500 dark:text-gray-400 line-clamp-1"
                    th:text={description}
                >
                </p>
            </a>
        </div>
    </div>
    <div class="text-center flex justify-between">
        <div  class="flex justify-start">
            <span class="text-gray-900 dark:text-white flex text-xs ml-1 font-medium rounded-sm"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="size-4"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
                    ></path>
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
                </svg>
                <span  th:text={orderNum}></span>
            </span>
             <span class="text-gray-900 dark:text-white flex text-xs ml-1 font-medium rounded-sm">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="size-4"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
                ></path>
            </svg>
            <span  th:text={orderNum}></span>
        </span>
             <span class="text-gray-900 dark:text-white flex text-xs ml-1 font-medium rounded-sm">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-4"
        >
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z"
            ></path>
        </svg>
        <span  th:text={orderNum}></span>
        </span>
        </div>
        <a th:href="${'/'+themeName+'/link/'+linkTwo.linkId}" title="查看详情"  class="text-gray-900 dark:text-white text-xs font-medium"
>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
</a>
    </div>
</div>



<div
    th:id="${linkTwo.linkId + '-yo'}"
    class="absolute px-2 invisible z-10 inline-block text-left text-sm font-medium text-zinc-300 bg-slate-950 
     rounded-lg shadow-sm opacity-0 tooltip"
    role="tooltip"
    th:text={linkUrl}
>
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>
